{layout name="layout/header" /}
<link href="root/css/plugins/datapicker/datepicker3.css" rel="stylesheet">

<!--<link href="root/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">-->
<div class="wrapper wrapper-content animated fadeInRight" id="app">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>统计</h5>
                    <div class="ibox-tools">
                        <button type="button" class="btn btn-primary btn-sm refresh">刷新</button>
                    </div>
                </div>
                <div class="ibox-title">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <select class="form-control " v-model="type_id">
                                <option value="0">全部</option>
                                <option :value="i.id" v-for="i in type">{{i.name}}</option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label class="">起止日期</label>
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="开始日期" id="start" v-model="start" readonly  class="form-control datetimepicker">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="结束日期" id="end" v-model="end" readonly class="form-control datetimepicker">
                        </div>
                        <a class="btn btn-white" @click="search">查询</a>

                    </form>
                </div>
            </div>
            <!--查询数据-->
            <div class="ibox-content">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>收入金额</th>
                        <th>支出金额</th>
                        <th>总计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{count.income}} 元</td>
                        <td>{{count.out}} 元</td>
                        <td>{{count.total}} 元</td>

                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5">

                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

</div>


<!-- Data picker -->
<script src="root/js/plugins/datapicker/bootstrap-datepicker.js"></script>


<script>
    var type = {$type};
    var data ={
        start:'',
        end:'',
        type:type,
        type_id:0,
        count:{
            income:0,
            out:0,
            total:0,
        }
    }
    var app =new Vue({
        el:"#app",
        data :data,
        methods:{
            search:function () {
                if(this.start =='' || this.end==''){
                    layer.msg('起始时间不能为空')
                }else {
                    var url = "{:url('ajax_get_count_data')}";
                    $.post(url,data,function (res) {
                        console.log(res)
                        data.count = res.data
                    },'json')
                }

            },
            dateDefind:function () {
                $('.datetimepicker').datepicker({
                    format: 'yyyy-mm-dd',
                    language:  'zh-CN',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    minView: 3,
                    forceParse: 0,
                    endDate:new Date()
                });
                $('#start').datepicker().on('hide', function (ev) {
                    var value = $(this).val();
                    data.start = value;
                })
                $('#end').datepicker().on('hide', function (ev) {
                    var value = $(this).val();
                    data.end = value;
                })
            }
        },
        mounted:function () {
            this.dateDefind();
        }
    });

</script>
